<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>质量管理</el-breadcrumb-item>
            <el-breadcrumb-item>常见缺陷</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->

        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryDefect" class="demo-form-inline">
            <el-form-item label="缺陷描述">
                <el-input v-model="queryDefect.defectName" placeholder="缺陷描述" clearable />
            </el-form-item>
            <el-form-item label="检测项类型">
                <el-input v-model="queryDefect.indexType" placeholder="检测项类型" clearable />
            </el-form-item>
            <el-form-item label="缺陷等级">
                <el-select v-model="queryDefect.defectLevel" placeholder="缺陷等级">
                    <el-option label="轻微缺陷" :value="'MIn'" />
                    <el-option label="严重缺陷" :value="'MAj'" />
                    <el-option label="致命缺陷" :value="'CR'" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadDefects">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetting">重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->

        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增缺陷" @click="this.addDefectDialogVisible = true" type="primary">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 表格 开始 -->
        <el-table ref="dictTable" :data="defects" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="缺陷描述" property="defectName" />
            <el-table-column align="center" label="检测项类型" property="indexType" />
            <el-table-column align="center" label="缺陷等级" property="defectLevel">
                <template #default="scope">
                    <el-tag v-if="scope.row.defectLevel == 'MIN'" class="ml-2" type="success">轻微缺陷</el-tag>
                    <el-tag v-else-if="scope.row.defectLevel == 'MAJ'" class="ml-2" type="warning">严重缺陷</el-tag>
                    <el-tag v-else class="ml-2" type="danger">致命缺陷</el-tag>
                </template>
            </el-table-column>
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                        @confirm="handleDelete(scope.row.defectId)" title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->

        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="defectLimit" :pager-count="defectMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="defectTotal" />
        <!-- 分页栏结束 -->

        <!-- 添加缺陷的弹窗窗体开始-->
        <el-dialog v-model="addDefectDialogVisible" title="添加字典" width="600" align-center>
            <!-- 添加缺陷的表单 -->
            <el-form label-width="100px" :model="newDefect" style="max-width: 460px">
                <el-form-item label="缺陷描述">
                    <el-input v-model="newDefect.defectName" />
                </el-form-item>
                <el-row justify="space-between">
                    <el-col :span="10">
                        <el-form-item label="检测项类型">
                            <el-select v-model="newDefect.indexType" class="m-2" placeholder="Select" size="large">
                                <el-option v-for="item in indexTypeDate" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="缺陷等级">
                            <el-select v-model="newDefect.defectLevel" class="m-2" placeholder="Select" size="large">
                                <el-option v-for="item in defectLevelDate" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddDefect">取消</el-button>
                    <el-button type="primary" @click="doAddDefect">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加字典的弹窗窗体结束-->

        <!-- 编辑字典的弹窗开始 -->
        <el-dialog v-model="defectEditDrawer" width="36%" align-center>
            <template #header>
                <h4>修改缺陷类型</h4>
            </template>
            <template #default>
                <div>
                    <!-- 编辑缺陷的表单 -->
                    <el-form label-width="100px" :model="editDefect" style="max-width: 460px">
                        <el-form-item label="缺陷描述">
                            <el-input v-model="editDefect.defectName" />
                        </el-form-item>
                        <el-row justify="space-between">
                            <el-col :span="10">
                                <el-form-item label="检测项类型">
                                    <el-select v-model="editDefect.indexType" class="m-2" placeholder="Select" size="large">
                                        <el-option v-for="item in indexTypeDate" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="缺陷等级">
                                    <el-select v-model="editDefect.defectLevel" class="m-2" placeholder="Select"
                                        size="large">
                                        <el-option v-for="item in defectLevelDate" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doDefectEdit">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑字典的弹窗结束 -->
    </div>
</template>

<script>
import qcDefectRequest from '../../api/qc-defect.js';
export default {
    data() {
        return {
            queryDefect: {},// 分装查询缺陷条件的缺陷对象
            defects: [],//缺陷数据列表
            defectCurrPage: 1, // 缺陷分页的当前页码
            defectLimit: 10, // 缺陷分页的每页大小
            defectTotal: 0, // 缺陷列表的总条数
            defectMaxPage: 1,// 缺陷列表的最大页码
            //模拟数据库缺陷类型表
            indexTypeDate: [{ value: '尺寸', label: '尺寸' }, { value: '外观', label: '外观' }, { value: '重量', label: '重量' },
            { value: '性能', label: '性能' }, { value: '成分', label: '成分' }, { value: '安全', label: '安全' },],
            //模拟数据库缺陷等级表
            defectLevelDate: [{ value: 'MIN', label: '轻微缺陷' }, { value: 'MAJ', label: '严重缺陷' }, { value: 'CR', label: '致命缺陷' }],

            // 新增缺陷相关属性
            addDefectDialogVisible: false,// 新增缺陷的弹窗标志
            newDefect: {},// 封装新增的缺陷信息
            currDefect: {},// 保存正在操作的缺陷信息

            //编辑缺陷相关属性
            defectEditDrawer: false,//修改缺陷的弹窗标志
            editDefect: {},//封装修改的缺陷信息
        }
    },
    methods: {
        /**
         * 行删除事件
         * @param {} row 
         */
        handleDelete(id) {
            console.log(id);
            qcDefectRequest.delete(id,res=>{
                if(res.code == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    });
                    this.loadDefects();
                }else{
                    this.$message({
                        type:'error',
                        message:'删除失败'
                    })
                }
            })
        },
         /**
         * 确定编辑缺陷
         */
         doDefectEdit() {
            console.log("开始编辑")
            // 提交editUser即可
            qcDefectRequest.edit(this.editDefect, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改字典成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.defectEditDrawer = false;
                    // 重新加载数据
                    this.loadDefects();
                    // 将editUser制空
                    this.editDefect = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '字典重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消缺陷编辑
         */
         cancelEdit() {
            // 将编辑的用户制空
            this.editDefect = {};
            // 关闭抽屉弹窗
            this.defectEditDrawer = false;
        },
        /**
         * 行编辑事件
         * @param {*} row 
         */
        handleEdit(row) {
            qcDefectRequest.selectById(row.defectId, res => {
                this.defectEditDrawer = true;
                this.editDefect = res.data;
            })

        },
        /**
         * 新增缺陷的提交按钮事件
         */
        doAddDefect() {
            // 数据校验：略
            // 提交数据
            qcDefectRequest.save(this.newDefect, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddDefect();
                    // 重新加载数据
                    this.loadDefects();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增缺陷的按钮事件
         */
        cancelAddDefect() {
            // 关闭窗体
            this.addDefectDialogVisible = false;
            // 清空newDict
            this.newDefect = {};
        },
        resetting() {
            qcDefectRequest.list(this.defectCurrPage, this.defectLimit, this.queryDefect = {}, res => {
                // 设置数据
                this.defects = res.data.list;
                this.defectTotal = res.data.total;
                this.defectMaxPage = res.data.pages;
            });
        },
        loadDefects() {
            qcDefectRequest.list(this.defectCurrPage, this.defectLimit, this.queryDefect, res => {
                // 设置数据
                this.defects = res.data.list;
                this.defectTotal = res.data.total;
                this.defectMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载字典数据列表
        this.loadDefects();
    }
}
</script>